<!DOCTYPE html>
<html lang="en" xmlns:font-size="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #d1{
        background-image: url("../../png/regist.png") ;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;
        border: 1px solid black;
    }
    #d11{
        width: 440px;
        height: 470px;
        border: 1px solid black;
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        right: 5cm;
        bottom: 70px;
    }
    #d110{
        width: 440px;
        height: 30px;
    }
    #d111,#d112{
        width: 440px;
        height: 60px;
        line-height: 60px;
        background-color: white;
    }
    #i1,#i2{
            width: 380px;
            height:58px;
            border:0;
            float:left;
            font-size: 20px;
    }
    #i3{
            width: 440px;
            height:60px;
            border:0;
            float:left;
            font-size: 20px;
            background-color: #1DABEE;
    }
    #p1,#p2{
        width: 40px;
        vertical-align: middle;
    }
    input:focus{
        outline: none
    }
    #s1{
        color: white;
        font-family: 黑体 ;
        font-size: 25px;
    }
    #s2,#s4{
        color: white;
        float: right;
        top: 30px;
    }
    #s3{
        color: white;
        position: center;
    }

</style>
<body>
    <div id="d1">
        <div id="d11">
            <div id="d110">
            <span id="s1" >
                登录夏季商城
            </span>
            <span id="s2">
                新用户注册
            </span>
            </div>
            <hr>
            <form  action="#" method="post">
                <div id="d111">
                <input  id="i1" type="text" placeholder="请输入你的用户名">
                    <img src="../../png/yhm.png" id="p1">
                </div>
                <br>
                <div id="d112">
                <input  id="i2" type="password"placeholder="请输入你的密码">
                    <img src="../../png/mm.png" id="p2">
                </div>
                <div id="d113" style="height: 60px;width: 440px">
                <input type="checkbox" >
                <span id="s3" style="line-height: 80px">自动登录</span>
                <span id="s4" style="line-height: 40px">忘记密码？</span>
                </div>
                    <br>
                <div id="d114">
                <input id="i3" type="submit" value="登录">
                </div>
            </form>

        </div>
    </div>
</body>
</html>